<template>
  <div>
    <el-page-header
      :content="$t('system_menu.edit_rank')"
      @back="$router.back()"
    />
    <el-card class="box-card mt-4">
      <div class="ml-2">
        <div style="font-size: 16px">
          <span class="basicInfo">{{ $t('system_menu.level_name') }}:</span
          ><span>{{ form.levelName }}</span>
        </div>
        <div style="font-size: 16px">
          <span class="basicInfo">{{ $t('system_menu.level_code') }}:</span
          ><span>{{ form.levelCode }}</span>
        </div>
        <div style="font-size: 16px">
          <span class="basicInfo">{{ $t('common.characterCode') }}:</span
          ><span>{{ $t('system_menu.' + form.characterCode) }}</span>
        </div>
      </div>
      <div class="mt-4 flex justify-between" style="gap: 30px">
        <div v-for="(tree, index) in treeData" :key="index" style="flex: 1">
          <p
            style="
              text-indent: 8px;
              line-height: 32px;
              font-weight: 500;
              font-size: 16px;
            "
          >
            {{ $t('system_menu.platform_list.' + tree.platform) }}
          </p>
          <div style="overflow: auto; height: 480px">
            <el-tree
              ref="treeRef"
              node-key="menuId"
              show-checkbox
              :data="tree.list"
              :props="defaultProps"
            >
              <template v-slot="{ node, data }">
                <div class="custom-tree-node">
                  <span class="label">{{
                    data.list
                      ? $t('menu.operator.M_' + data.menuId)
                      : $t('menu.operator.' + node.label)
                  }}</span>
                </div></template
              >
            </el-tree>
          </div>
        </div>
      </div>
      <el-button
        type="primary"
        :loading="confirmLoading"
        @click.native="editRank()"
        style="float: right"
        class="mb-4"
        >{{ $t('common.confirm') }}</el-button
      >
    </el-card>
  </div>
</template>
<script>
import { menuDataTranslate2 } from '@/utils'
import {
  getLevelInfo,
  getFunctionList,
  editFunction,
  getAllPermission
} from '@/api/system-menu'
import {
  getOperatorMenuList,
  getOperatorMenuFunctionList
} from '@/api/operator'
export default {
  props: ['level_id'],
  data() {
    return {
      confirmLoading: false,
      usernameDisabled: false,
      form: {
        characterLevelId: '',
        levelCode: '',
        levelName: '',
        levelDesc: '',
        characterCode: '',
        node: []
      },
      treeData: [], //存储树的数据
      ramTreeData: [],
      defaultProps: {
        children: 'list',
        label: 'menuTitle'
      },
      dataForm: {
        node: [],
        roleName: '',
        roleFunctionList: []
      },
      loading: false,
      rules: {},
      id: this.$route.query.id,
      code: this.$route.query.code,
      node: []
    }
  },
  computed: {},
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.treeData = []
      this.form.characterLevelId = this.id
      this.form.levelCode = this.code
      this.getInfo(this.id)
    },
    // 获取信息
    getInfo(id) {
      getLevelInfo(id)
        .then((res) => {
          this.form.levelCode = res.levelCode
          this.form.levelName = res.levelName
          this.form.characterCode = res.characterCode
          // debugger
          this.getMenuPermission().then((res) => {
            this.getFunctionInfo(this.form.characterCode, this.form.levelCode)
          })
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    //确定编辑权限
    editRank() {
      let checkTemp = []
      for (let i = 0; i < this.treeData.length; i++) {
        let checkedNodes = this.$refs['treeRef'][i]
          .getCheckedNodes()
          .filter((node) => !node.list)
          .map((node) => ({ menuFuncCode: node.menuId }))
        for (let i = 0; i < checkedNodes.length; i++) {
          checkTemp.push(checkedNodes[i].menuFuncCode)
        }
      }
      console.log('checkTemp', checkTemp)
      let data = {
        characterCode: this.form.characterCode,
        levelCode: this.form.levelCode,
        menuFuncCodeList: checkTemp
      }
      editFunction(data)
        .then((res) => {
          // console.log(res)
          this.$router.back()
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    /**
     * 将功能权限当作菜单加入菜单的Tree中
     * @param menuList
     * @param functionList 功能列表
     */
    initMenuFunctionTree(menuList, functionList) {
      for (let menu of menuList) {
        if (menu.list && menu.list.length > 0) {
          this.initMenuFunctionTree(menu.list, functionList)
        } else {
          for (let fun of functionList) {
            if (menu.menuId === fun.menuId) {
              if (menu.list === undefined) {
                menu.list = []
              }
              var newObj = {
                menuId: fun.menuFuncCode,
                menuTitle: fun.funName
              }
              menu.list.push(newObj)
            }
          }
        }
      }
    },
    //获取已选择的权限
    getFunctionInfo(characterCode, code) {
      let params = {
        characterCode: characterCode,
        levelCode: code
      }
      getFunctionList(params)
        .then((res) => {
          if (res && res.length > 0) {
            const checkedArray = res.map((v) => v.menuFuncCode)
            for (let i = 0; i < this.treeData.length; i++) {
              this.$refs['treeRef'][i].setCheckedKeys(checkedArray)
              console.log('tree', this.$refs['treeRef'][i])
            }
            console.log('checkedArr', checkedArray)
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    //获取所有菜单和权限
    getMenuPermission() {
      return new Promise((resolve, reject) => {
        getAllPermission(this.form.characterCode)
          .then((res) => {
            for (let i = 0; i < res.length; i++) {
              let temp = menuDataTranslate2(
                res[i].menuList,
                'menuId',
                'parentMenuId'
              )
              let obj = {
                platform: res[i].platform,
                list: temp
              }
              this.treeData.push(obj)
              this.initMenuFunctionTree(
                this.treeData[i].list,
                res[i].menuFunctionList
              )
            }
            console.log('treeData1', this.treeData)
            resolve()
          })
          .catch((err) => {
            this.$message.error(err)
            reject()
          })
      })
    }
  }
}
</script>
<style scoped>
.basicInfo {
  /* font-weight: 500; */
  margin-right: 8px;
  line-height: 32px;
}
</style>>